<template>
  <el-form
    :inline="true"
    :model="formInline"
    style="margin-top: 40px; margin-left: 40px"
    class="demo-form-inline"
  >
    <el-form-item label="Category :">
      <el-select
        v-model="formInline.category"
        placeholder="select category"
        clearable
        style="width: 150px"
      >
        <el-option label="category 1" value="1" />
        <el-option label="category 2" value="2" />
      </el-select>
    </el-form-item>
    <el-form-item label="Module Name:">
      <el-input
        v-model="formInline.module_name"
        placeholder="input module name"
        clearable
        style="width: 200px"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit"> Query</el-button>
    </el-form-item>
  </el-form>
  <el-table
    :data="tableData"
    stripe
    head-align="center"
    :cell-style="{ textAlign: 'center' }"
    :header-cell-style="{ 'text-align': 'center' }"
    height="1000"
    style="margin-left: 20px; width: calc(100% - 40px)"
  >
    <el-table-column label="Index" type="index" width="80" />
    <el-table-column prop="Category" label="Category" width="120" />
    <el-table-column prop="ModuleName" label="ModuleName" width="200" />
    <el-table-column prop="ModuleNameEn" label="ModuleNameEn" width="200" />
    <!-- <el-table-column prop="Content" label="Content" width="420" />
    <el-table-column prop="ContentEn" label="ContentEn" width="420" /> -->
    <el-table-column
      :show-overflow-tooltip="true"
      prop="Content"
      label="Description"
      width="720"
    />
    <el-table-column
      :show-overflow-tooltip="true"
      prop="ContentEn"
      label="Content"
      width="720"
    />
  </el-table>
</template>

<script setup lang="ts" name="SecurityLearning">
import { ref, reactive } from "vue";
import api from "@/utils/axiosInstance";

let loading = ref(false);
let tableData = ref([]);
const formInline = reactive({
  category: "",
  module_name: "",
});

const onSubmit = () => {
  console.log("submit!");
  loading.value = true;
  api
    .post("/safety-education/query", formInline)
    .then((response) => {
      // 处理API响应
      tableData.value = response.data;
    })
    .catch((error) => {
      // 处理错误
      console.log(error, "error");
    })
    .finally(() => {
      loading.value = false;
    });
};
</script>

<style lang="css" scoped>
.demo-form-inline .el-input {
  --el-input-width: 280px;
}
.demo-form-inline .el-select {
  --el-select-width: 280px;
}
.pass,
.occurred {
  text-decoration: underline;
  background-color: #70c546;
  border-style: solid;
  border-radius: 5px;
  /* border-width: 3px; */
  border-color: #70c546;
}
.noPass,
.noOccurred {
  background-color: #f56c6c;
  border-style: solid;
  border-radius: 5px;
  border-width: 4px;
  border-color: #f56c6c;
}
.modal {
  width: 200px;
  height: 150px;
  background-color: skyblue;
  border-radius: 10px;
  padding: 5px;
  box-shadow: 0 0 5px;
  text-align: center;
  position: fixed;
  left: 50%;
  top: 20px;
  margin-left: -100px;
}
</style>
